<template>
    <el-menu
        :router="true"
        active-text-color="#3399FF"
        class="el-menu-vertical-demo"
        :default-active="light">
        <el-menu-item index="/">
            <i class="el-icon-s-home" />
            <span slot="title">首页</span>
        </el-menu-item>
        <!-- <el-submenu index="3">
            <template slot="title">
                <i class="el-icon-s-custom" />
                <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/users/shaguo">砂锅用户</el-menu-item>
            <el-menu-item index="/users/shaguohao">砂锅号用户</el-menu-item>
            <el-menu-item index="/users/listManage">名单管理</el-menu-item>
            <el-menu-item index="/users/authentic">认证审核</el-menu-item>
            <el-menu-item index="/users/contacts">人脉列表</el-menu-item>
        </el-submenu> -->
        <el-submenu index="4">
            <template slot="title">
                <i class="el-icon-s-help" />
                <span slot="title">运营管理</span>
            </template>
            <el-menu-item index="/run/param">参数配置</el-menu-item>
            <el-menu-item index="/run/content">内容运营</el-menu-item>
            <!-- <el-menu-item index="/run/topic">话题管理</el-menu-item> -->
            <!-- <el-menu-item index="/run/ad">广告管理</el-menu-item> -->
            <!-- <el-menu-item index="/run/active">活动管理</el-menu-item> -->
            <el-menu-item index="/run/version">版本管理</el-menu-item>
            <el-menu-item index="/run/general">基础档案</el-menu-item>
            <el-menu-item index="/run/danger">风险防控</el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="5">
            <template slot="title">
                <i class="el-icon-phone-outline" />
                <span slot="title">客服中心</span>
            </template>
            <el-menu-item index="/customerService/complaint">举报处理</el-menu-item>
            <el-menu-item index="/customerService/report">意见反馈</el-menu-item>
        </el-submenu> -->
        <el-submenu index="6">
            <template slot="title">
                <i class="el-icon-s-order" />
                <span slot="title">财务管理</span>
            </template>
            <el-menu-item index="/finance/set">财务设置</el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="7">
            <template slot="title">
                <i class="el-icon-data-line" />
                <span slot="title">报表中心</span>
            </template>
            <el-menu-item index="/report/user">用户统计</el-menu-item>
            <el-menu-item index="/report/content">内容统计</el-menu-item>
            <el-menu-item index="/report/finance">财务统计</el-menu-item>
            <el-menu-item index="/report/tag">标签统计</el-menu-item>
        </el-submenu> -->
        <!-- <el-submenu index="8">
            <template slot="title">
                <i class="el-icon-s-tools" />
                <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="/system/account">账户管理</el-menu-item>
            <el-menu-item index="/system/scope">权限管理</el-menu-item>
        </el-submenu> -->
    </el-menu>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    computed: {
        // 解决3级路由不高亮的问题
        light: function (val) {
            var n = this.$route.path.lastIndexOf('/')
            var str = this.$route.path.substr(0, n)
            // 如果是3级路由，返回2级路由路径
            if (this.$route.path.split('/').length > 3) {
                return str
            } else {
                return this.$route.path
            }
        }
    },
    mounted () {

    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: calc(100vh - 61px);
    }
</style>
